<template>
  <div id="qrCodeDiv" style="display: none">
      <!-- 使用css样式对生成的二维码打印时定义了分页 -->
      <div
          v-for="(qrCode, index) in qrCodeList"
          :key="index"
          style="
          display: flex;
          justify-content: center;
          page-break-after: always;
          flex-direction: column;
          align-items: center;
          "
      >
          <!-- 这个div承载了每个二维码实例,必须定义 -->
          <div :id="'qrCode' + index"></div>
          <!-- 自定义内容 -->
          <div style="margin: 10px 0">{{ qrCode.title }}</div>
      </div>
  </div>
</template>

<script>
// 引入插件
  import QRCode from 'public/plugins/qrcodejs2';
  export default {
      props: {
        qrContentKeys:{
          default:()=>{
            return []
          }
        }
      },
      data () {
          return {
              /* 放置所有的二维码 */
              qrCodeList: []
          };
      },
      methods: {
          printQrCode (rows) {
              if (rows.length === 0) {
                  this.$Message.error('请选择行！')
                  return
              }
              // 每次渲染前清除上一次渲染的二维码
              for (let index = 0; index < this.qrCodeList.length; index++) {
                  const domId = 'qrCode' + index;
                  document.getElementById(domId).innerHTML = '';
              }
              this.qrCodeList = [...rows];
              // qrCodeList添加title，二维码下方显示文字
              this.qrCodeList.map((d, index) => {
                  let title = d['sf_name'];
                  this.$set(this.qrCodeList[index], 'title', title)
              })
              this.$nextTick(() => {
                this.createNewWin()
              });
          },
          //构建新网页
          createNewWin(){
            // 构建新网页(关键步骤,必须先构建新网页,再生成二维码,否则不能显示二维码)
            var newWin = window.open(''); // 新打开一个空窗口
            let newStr = document.getElementById('qrCodeDiv').innerHTML;
            newWin.document.body.innerHTML = newStr;
            for (let index = 0; index < this.qrCodeList.length; index++) {
                let current = this.qrCodeList[index]
                let content = {};
                this.qrContentKeys.forEach(item=>{
                  content[item] = current[item]
                })
                content = JSON.stringify(content)
                this.qrCode('qrCode' + index, content);
                this.qrCode(
                    newWin.document.getElementById('qrCode' + index),
                    content
                );
            }
            newWin.print(); // 打印刚才新建的网页
            newWin.close(); // 打印或取消后关闭弹出的网页
          },
          /* 构建二维码 */
          qrCode (id, content, w, h) {
              new QRCode(id, {
                  width: w || 124,
                  height: h || 124,
                  text: content // 二维码内容，必须为字符串格式
                  // render: 'canvas' , // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
                  // background: '#f0f', // 背景色
                  // foreground: '#ff0' // 前景色
              });
          }
      }
  };
</script>
